<template>
  <div class="csqd">
    <a-search :change="paginationElement?.change" :list="list" v-model="form"></a-search>
    <a-card resize>
      <a-card>
        <a-upload-data :confirm="handleUploadConfirm"></a-upload-data>
      </a-card>
      <a-table :data="data" :head="head"> </a-table>
      <a-pagination ref="paginationElement" :total="total" :change="getTableData"></a-pagination>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { tableData, upload } from '../../api/bwlgl/csqd'
import deptTree from '../../store/deptTree'
import { ElMessage } from 'element-plus'

interface CSQD {
  id: string
  memorandumId: string
  departmentId: number
  deptName: string
  [key: string]: unknown
}

const type = [
  { label: '奖励', value: '1' },
  { label: '惩戒', value: '0' }
]
const paginationElement = ref<APaginationInstance | null>()

const form = ref({})
const list = ref<FormItem[]>([
  { prop: 'memorandumName', 'aria-label': '备忘录名称', type: 'input' },
  { prop: 'deptId', 'aria-label': '提交部门', type: 'deptTree' }
])

const data = ref<CSQD[]>([])
const head = ref([
  { prop: 'memorandumName', label: '备忘录名称' },
  { prop: 'measureType', label: '措施类型' },
  { prop: 'deptName', label: '所属部门' },
  { prop: 'measureLaw', label: '措施内容' },
  { prop: 'measureContent', label: '法律法规依据' },
  { prop: 'gmtCreate', label: '创建时间' }
])
const total = ref(0)

function getTableData(row: number, size: number) {
  tableData<CSQD>({
    size,
    row,
    ...form.value
  }).then(({ data: result }) => {
    data.value = result.pageList.map((item) => {
      return {
        ...item,
        deptName: deptTree.getDeptTreeNameById(item.departmentId),
        measureType: type.find((i) => i.value === item.measureType)?.label
      }
    })
    total.value = result.totals
  })
}

function handleUploadConfirm(formData: FormData, close: () => void) {
  upload(formData).then(({ msg }) => {
    ElMessage.success(msg)
    paginationElement.value?.change()
    close()
  })
}
</script>
